<%@ page import="com.bjpowernode.user.Dynamic" %>
<%@ page import="java.util.List" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" +
            request.getServerPort() + request.getContextPath() + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=basePath%>">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .dynamic{
            width: 850px;
            height: auto;
            margin-top: 10px;
            background: white;
        }
        .shang{
            height: 20px;
            width: 850px;
        }
        .name{
            margin-left: 30px;
            height: 30px;
            width: 790px;
        }
        .time{
            margin-top: 3px;
            margin-left: 30px;
            height: 20px;
            width: 790px;
        }
        .neirong{
            margin-top: 20px;
            margin-left: 30px;
            width: 790px;
        }
    </style>
    <script type="text/javascript" src="jQuery/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        <%
            String name = (String) session.getAttribute("username");
        %>
        function sc(scid){
            $.ajax({
                url:"collect/add.do",
                data:{
                    username:"<%=name%>",
                    name:"<%=name%>",
                    scid:scid
                },
                success:function(response){
                    alert(response);
                }
            })
        }
        function dz(dzid){
            $.ajax({
                url:"thumbs/add.do",
                data:{
                    username:"<%=name%>",
                    dzid:dzid
                },
                success:function(response){
                    alert(response);
                }
            })
        }
        var replyIndex = 0;
        function pl(i,index){
            if (document.getElementsByClassName("tr")[index].style.display == "none"){
                document.getElementsByClassName("tr")[index].style.display = "block";
                document.getElementsByClassName("tbody")[index].style.display = "block";
                $.ajax({
                    url:"comment/select.do",
                    data:{
                        id:i
                    },
                    success:function(response){
                        var html = "";
                        $.each(response,function(index,element){
                            var arr = index.split("/");
                            html += "<tr><td colspan='3'>";
                            html += "<font style='color: rgb(235,115,80);margin-left: 50px'>";
                            html += arr[1];
                            html += "</font>";
                            html += ":";
                            html += arr[3];
                            html += "</td></tr>";
                            html += "<tr><td colspan='3'>";
                            html += "<font style='color: rgb(128,128,128);margin-left: 50px'>";
                            html += arr[2];
                            html += "</font>";
                            html += "<font style='color: black;margin-left: 500px;cursor: pointer' onclick='clickReply("+replyIndex+",\""+index+"\")' onmouseover='reply(this)' onmouseout='outReply(this)'>回复</font>";
                            html += "</td></tr>";

                            html += "<tr id=\""+index+"\" style='display: none'>";
                            html += "<td colspan='3' style='background-color: white'>";
                            html += "<input id=\""+"one"+index+"\" type='text' onfocus='commentOneFocus(this)' onblur='commentOneBlur(this)' style='width: 650px;height: 35px;outline: none;background: none;margin-left: 50px'/>";
                            html += "<input type='button' onclick='oneClickReply(\""+index+"\","+arr[0]+")' value='回复' style='color: white;outline:none;border: 0;background-color: rgb(255,129,64);width: 60px;height: 30px;font-size: 12px;margin-left: 50px'/>";
                            html += "</td></tr>";
                            $.each(element,function (i,m) {
                                html += "<tr style='background: rgb(210,210,210)'><td colspan='3'>";
                                html += "<font style='color: rgb(235,115,80);margin-left: 50px'>";
                                html += m["username"];
                                html += "</font>";
                                html += ":";
                                html += m["zpneirong"];
                                html += "</td></tr>";
                                html += "<tr style='background: rgb(210,210,210)'><td colspan='3'>";
                                html += "<font style='color: rgb(128,128,128);margin-left: 50px'>";
                                html += m["zptime"];
                                html += "</font>"
                                html += "</td></tr>";
                            })
                            replyIndex ++;
                        })
                        replyIndex = 0;
                        document.getElementsByClassName("tbody")[index].innerHTML = html;
                    }
                })
            } else {
                document.getElementsByClassName("tr")[index].style.display = "none";
                document.getElementsByClassName("tbody")[index].style.display = "none";
            }
        }
        function plTwo(i,index){
            var comment = document.getElementsByClassName("comment")[index].value;
            if (comment == ""){
                alert("评论不能为空");
            }else{
                $.ajax({
                    url:"comment/add.do",
                    data:{
                        username:"<%=name%>",
                        comment:comment,
                        plid:i
                    },
                    success:function(response){
                        alert(response);
                    }
                })
            }
        }
        function reply(obj){
            obj.style.color = "rgb(235,115,80)";
        }
        function outReply(obj){
            obj.style.color = "black";
        }
        function dtFocus(){
            document.getElementById("dt").style.border = "1px solid rgb(255,129,64)"
        }
        function dtBlur(){
            document.getElementById("dt").style.border = "1px solid rgb(0,0,0)"
        }
        function oneClickReply(name,i){
            var id = "one"+name;
            alert(i)
            var text = document.getElementById(id).value;
            if (text == ""){
                alert("回复不能为空！");
            } else {
                $.ajax({
                    url:"review/add.do",
                    data:{
                        username:"<%=name%>",
                        review:text,
                        zpId:i
                    },
                    success:function (response){
                        alert(response);
                    }
                })
            }
        }
        function clickReply(index,name){
            var s = document.getElementById(name);
            if (s.style.display == "none"){
                s.style.display = "block";
            } else {
                s.style.display = "none";
            }
        }
    </script>
</head>
<body>
<%
    List<Dynamic> dynamicList = (List<Dynamic>) request.getAttribute("dynamicList");
    if (dynamicList.size() == 0){
%>
<center>
    <div style="background: white;width: 850px;height: 50px;line-height: 50px;margin-top: 10px">
        这里空空如也，您还没有发过任何微博。。。
    </div>
</center>
<%
    }
    for(int i = 0; i < dynamicList.size(); i++){
%>
<center id="one">
    <div class="dynamic">
        <div class="shang">
        </div>
        <div class="name" align="left">
            <a style="text-decoration: none;color: black" href="user/findXinxi.do?name=<%=dynamicList.get(i).getUsername()%>" target="_top"><b><%=dynamicList.get(i).getUsername()%></b></a>
        </div>
        <div class="time" align="left" style="color: #909090;font-size: 15px">
            <%=dynamicList.get(i).getFbtime()%>
        </div>
        <div class="neirong" align="left">
            <%=dynamicList.get(i).getDt()%>
        </div>
        <hr style="color: rgba(0,0,0,0.33);margin-top: 20px">
        <table width="850px" style="margin-top: 10px;">
            <tr align="center" style="height: 30px;color: #909090">
                <td onclick="sc(<%=dynamicList.get(i).getId()%>)" style="border-right: 1px solid rgba(0,0,0,0.33);cursor: pointer">收藏</td>
                <td onclick="pl(<%=dynamicList.get(i).getId()%>,<%=i%>)" style="border-right: 1px solid rgba(0,0,0,0.33);cursor: pointer">评论</td>
                <td onclick="dz(<%=dynamicList.get(i).getId()%>)" style="cursor: pointer">点赞</td>
            </tr>
        </table>
    </div>
</center>
<script type="text/javascript">
    function commentOneFocus(obj){
        obj.style.border = "1px solid rgb(250,125,60)";
        obj.style.backgroundColor = "rgb(255,255,255)";
    }
    function commentOneBlur(obj){
        obj.style.border = "1px solid rgb(180,180,180)";
        obj.style.backgroundColor = "rgb(242,242,245)";
    }
</script>
<table style="border-bottom: 1px solid rgba(0,0,0,0.23);background: rgb(242,242,245);width: 100%">
    <tr class="tr" style="display: none;border-bottom: 1px solid rgb(217,217,217)">
        <td align="center" width="750px">
            <input type="text" class="comment" onfocus="commentOneFocus(this)" onblur="commentOneBlur(this)" style="width: 650px;height: 35px;outline: none;background: none;"/>
        </td>
        <td align="center" width="100px">
            <input type="button" value="评论" onclick="plTwo(<%=dynamicList.get(i).getId()%>,<%=i%>)" style="color: white;outline:none;border: 0;background-color: rgb(255,129,64);width: 60px;height: 30px;font-size: 12px"/>
        </td>
    </tr>
    <tbody class="tbody" style="display: none">

    </tbody>
</table>
<%
    }
%>
</body>
</html>
